import React from 'react';
import { SvgIcon } from '@/components/icon';
import { App } from 'antd';

interface HotQuestionItem {
  content: string;
}

interface HotQuestionsProps {
  hotTitle: HotQuestionItem[];
  isShow: boolean;
  isPc: boolean;
  licenseFlag: boolean;
  isLicenseValid: boolean;
  handleActivateClick: () => void;
  onChatStart?: (msg: string) => void;
  chatStarted: boolean;
}

const HotQuestions: React.FC<HotQuestionsProps> = ({
  hotTitle,
  isShow,
  isPc,
  licenseFlag,
  isLicenseValid,
  handleActivateClick,
  onChatStart,
  chatStarted,
}) => {
  const { message } = App.useApp();
  if (!isShow) return null;
  return (
    <div
      className={`${isPc ? 'flex flex-wrap gap-x-3' : 'flex flex-col gap-y-2 px-5 pb-2'} `}
      style={{ width: isPc ? '100%' : '100%' }}
    >
      {hotTitle?.slice(0, 5).map((item, index) => {
        return (
          <div
            className={`hot-card my-1 flex cursor-pointer items-center bg-white px-2 text-sm font-font-weight-400 text-text-5 ${
              isPc ? 'w-auto' : 'w-full'
            }`}
            key={index}
            onClick={() => {
              console.log('chatStarted', chatStarted);
              if (licenseFlag && !isLicenseValid) {
                handleActivateClick();
                return;
              }
              if (onChatStart) {
                if (!chatStarted) {
                  message.info('请先提交必填项');
                  return;
                }
                onChatStart(item.content);
              }
            }}
          >
            <div>
              <SvgIcon icon={'ai-hot'} size={25} className="flex-shrink-0 rounded-md p-1" />
            </div>
            <div className="scrolltext">
              <span>{item.content}</span>
            </div>
          </div>
        );
      })}
    </div>
  );
};

export default HotQuestions;
